<template>
	<div class="detail">
		<myheader :title="title"></myheader>
		<router-link to="/lideta/mysearch">
			<div class="searchs">
				<img src="../../../static/lxb/search.png" />你想住在哪里
			</div>
		</router-link>
		<div class="beach"><img src="../../../static/lxb/zflo.jpg" /></div>
		<div class="img-box1">
			<div>
				<router-link to="lideta/whrent"><img src="../../../static/lxb/zhengzu.png" /></router-link>
				<p>整租</p>
			</div>
			<div>
				<router-link to="lideta/rentshare"><img src="../../../static/lxb/hezu.png" /></router-link>
				<p>合租</p>
			</div>
			<div>
				<router-link to="apartment"><img src="../../../static/lxb/gy.png" /></router-link>
				<p>独栋公寓</p>
			</div>
			<div>
				<router-link to="monthlyrent"><img src="../../../static/lxb/yz.png" /></router-link>
				<p>月租</p>
			</div>
		</div>
		<div class="img-box2">

			<div class="contact"><img src="../../../static/lxb/lx.png" />
				<p>联系我们</p>
			</div>
			<div class="contact1"></div>
			<div class="move"></div>
			<div class="contact1"></div>
		</div>
		<div class="title">
			<h4>优选房源</h4></div>

		<div class="list-box" v-for="item in data">
			<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}">
				<div class="list-detail">
					<div class="de-left">
						<img v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1" /></div>
					<div class="de-right">
						<div class="pro1">独栋.{{item.house_name}}({{item.house_des}})佛系社区{{item.house_type}}</div>
						<div class="pro2">{{item.house_size}}㎡北碚郊区 距蔡家站0.6㎞</div>
						<div class="pro3">
							<div>在线签约</div>
							<div>月租</div>
							<div>近地铁</div>
							<div>免中介费</div>
						</div>
					</div>
				</div>
			</router-link>
			<div class="mony">{{item.house_price}}元/月</div>

		</div>
		<div class="clik" @click="getData">{{state}}</div>
	</div>

</template>

<script>
	import myheader from '@/components/public/myheader'

	export default {
		name: "mylist",
		data() {
			return {
				state: '点击加载更多',
				title: '',
				type: '',
				data: "",
				page: 2,
				last_page: 0
			}
		},
		mounted: function() {

			//判读是否登陆了
			if(localStorage.getItem("nameid") == null || localStorage.getItem("nameid") == undefined || localStorage.getItem("nameid") == "") {
				this.$router.push({
					name: 'login'
				});
			} else {
				var _this = this;
				_this.axios.get(_this.ajaxUrl + '/api/mylist/finds').
				then(function(res) {
					_this.data = res.data.data;
				}).catch(function(err) {
					console.log(err)
				})

			};

		},
		components: {
			myheader,

		},
		methods: {
			getData() {
				var _this = this;
				_this.axios.get(_this.ajaxUrl + '/api/mylist/finds?page=' + _this.page).
				then(function(res) {
					for(var i = 0; i < res.data.data.length; i++) {
						_this.data.push(res.data.data[i]);
					}
					if(_this.page % 3 == 0) {
						_this.state = "没有更多了"
					}
					_this.page++;
					console.log(res)
				}).catch(function(err) {
					console.log(err)
				})

			}

		}
	}
</script>

<style scoped="scoped">
	.detail {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
	}
	
	.detail::-webkit-scrollbar {
		background: transparent;
		width: 0;
	}
	
	.searchs {
		width: 7.1rem;
		height: 0.6rem;
		margin: auto;
		border-radius: 0.5rem;
		background: #f5f5f5;
		color: #d6d6d6;
		font-size: 0.13rem;
		text-align: center;
		line-height: 0.6rem;
	}
	
	.searchs>img {
		width: 0.3rem;
		height: 0.25rem;
		line-height: 0.7rem;
	}
	
	.beach {
		width: 7rem;
		height: 3.4rem;
		margin: auto;
		margin-top: 0.2rem;
	}
	
	.beach>img {
		width: 100%;
		height: 100%;
	}
	
	.img-box1 {
		width: 7rem;
		height: 1.5rem;
		margin: auto;
		margin-top: 0.5rem;
		display: flex;
		justify-content: space-around;
	}
	
	.clik {
		width: 3rem;
		height: 0.6rem;
		text-align: center;
		line-height: 0.6rem;
		margin: auto;
		border-radius: 0.1rem;
		/*background: gainsboro;
		border: 1px dashed darkgray;*/
		color: gray;
		font-size: 0.16rem;
		display: block;
	}
	
	.img-box1>div {
		width: 1.3rem;
		height: 1.3rem;
		text-align: center;
		font-size: 0.12rem;
	}
	
	.img-box1 img {
		width: 0.95rem;
		height: 0.95rem;
	}
	
	.img-box2 {
		width: 7rem;
		height: 1.4rem;
		margin: auto;
		display: flex;
		justify-content: space-around;
	}
	
	.img-box2>div {
		width: 1.3rem;
		height: 1.3rem;
		text-align: center;
		font-size: 0.12rem;
	}
	
	.img-box2 img {
		width: 0.95rem;
		height: 0.95rem;
	}
	
	.title {
		width: 7rem;
		height: 0.45rem;
		margin: auto;
		margin-top: 0.8rem;
		clear: both;
	}
	
	.list-detail {
		width: 7rem;
		height: 1.5rem;
		margin: auto;
	}
	
	.de-left {
		width: 1.9rem;
		height: 1.5rem;
		float: left;
	}
	
	.de-left>img {
		width: 100%;
		height: 100%;
	}
	
	.de-right {
		width: 4.7rem;
		height: 1.5rem;
		float: right;
	}
	
	.pro1 {
		width: 4.7rem;
		height: 0.7rem;
		font-size: 0.3rem;
		color: black;
	}
	
	.pro2 {
		width: 4.7rem;
		height: 0.2rem;
		font-size: 0.12rem;
		color: #878e9b;
		margin-top: 0.08rem;
	}
	
	.pro3 {
		width: 4.7rem;
		height: 0.28rem;
		font-size: 0.12rem;
		color: #878e9b;
		margin-top: 0.1rem;
	}
	
	.pro3>div {
		width: auto;
		height: 0.28rem;
		background: #e6ecf2;
		color: #5781a7;
		font-size: 0.12rem;
		float: left;
		margin-left: 0.1rem;
	}
	
	.mony {
		width: 1.8rem;
		height: 0.3rem;
		text-align: center;
		line-height: 0.3rem;
		color: red;
		font-size: 0.36rem;
		margin-left: 2.4rem;
		margin-top: 0.12rem;
	}
	
	.list-box {
		width: 7rem;
		height: 2.2rem;
		margin: auto;
		margin-top: 0.25rem;
	}
</style>